<template>
  <div id="youngcadresedit">
    <div v-if="pageLoading">数据加载中...</div>
    <div v-else style="padding-top:10px;">
      <div v-if="showMore" id="recruitTable">
        <h2>学历信息</h2>
        <el-table :data="list1" highlight-current-row v-loading="listLoading" style="width: 100%;">
          <el-table-column type="index" label="序号" width="70" fixed align="center" class-name="tableth" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="education" label="学历" min-width="200" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startDate" label="入学时间" min-width="200" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="endDate" label="毕业时间" min-width="200" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <h2>职务信息</h2>
        <el-table :data="list2" highlight-current-row v-loading="listLoading" style="width: 100%;">
          <el-table-column type="index" label="序号" width="70" fixed align="center" class-name="tableth" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="unit" label="单位职务" min-width="200" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="level" label="职务等级" min-width="200" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startDate" label="时间" min-width="200" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <h2>考核信息</h2>
        <el-table :data="list3" highlight-current-row v-loading="listLoading" style="width: 100%;">
          <el-table-column type="index" label="序号" width="70" fixed align="center" class-name="tableth" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="theYear" label="考核年度" min-width="200" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="level" label="考核等级" min-width="200" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.level==='不称职'||scope.row.level==='未定考核等级'" style="color:red;font-weight:bolder">{{scope.row.level}}</span>
              <span v-else style="color:green;font-weight:bolder">{{scope.row.level}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="files" label="附件" min-width="200" header-align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.files" :key="index">
                <el-link
                  :href="$http.defaults.baseURL+$http.defaults.youngAPI+'api/gen/file/download?id='+item.id"
                  icon="el-icon-paperclip"
                >{{ item.name }}</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <h2>职级工资套改情况</h2>
        <el-table :data="list4" highlight-current-row v-loading="listLoading" style="width: 100%;">
          <el-table-column prop="jobDate" label="参加工作时间" width="150" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="eduYears" label="未记工龄学龄" width="150" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="years" label="套改年限" width="100" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="前任低一岗位" align="center">
            <el-table-column prop="post1" label="岗位" min-width="100" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="postDate1" label="任职时间" width="100" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="postYears1" label="任职年限" width="100" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="level1" label="套改薪级" width="100" align="center" show-overflow-tooltip>
            </el-table-column>
          </el-table-column>
          <el-table-column label="现任岗位" align="center">
            <el-table-column prop="post2" label="岗位" min-width="100" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="postDate2" label="任职时间" width="100" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="postYears2" label="任职年限" width="100" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="level2" label="套改薪级" width="100" align="center" show-overflow-tooltip>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="level" label="套改薪级" width="100" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <h2>职级工资变动情况</h2>
        <el-table :data="list5" highlight-current-row v-loading="listLoading" style="width: 100%;">
          <el-table-column prop="date" label="工资变动时间" width="120" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="post" label="岗位等级（岗位变动次月）" width="260" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="level" label="工资薪级" width="100" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="reason" label="变动原因" min-width="300" header-align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="files" label="附件" width="300" header-align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.files" :key="index">
                <el-link
                  :href="$http.defaults.baseURL+$http.defaults.youngAPI+'api/gen/file/download?id='+item.id"
                  icon="el-icon-paperclip"
                >{{ item.name }}</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-button style="margin-top:10px" @click.native="showMore=false">返回</el-button>
      </div>
      <div v-else>
        <h2>自然资源部直属事业单位局级干部基本工资变动审批表</h2>
        <table cellspacing="0" cellpadding="0" class="mytable">
          <tr>
            <th>变动原因</th>
            <td colspan="3">
              {{fReasonText(editForm.reason)}}
            </td>
            <th>变动年度</th>
            <td>
              {{editForm.theYear}}
            </td>
          </tr>
          <tr>
            <th>姓名</th>
            <td style="width:220px">
              {{editForm.realName}}
            </td>
            <th>性别</th>
            <td style="width:230px">
              {{editForm.gender?sexList.find(item=>item.value===editForm.gender).label:''}}
            </td>
            <th>出生年月</th>
            <td style="width:230px">
              {{formatDate(editForm.birthday)}}
            </td>
          </tr>
          <tr>
            <th>身份证号</th>
            <td style="width:230px">
              {{editForm.idCardNo}}
            </td>
            <th>文化程度</th>
            <td>
              {{editForm.education}}
            </td>
            <th>参加工作时间</th>
            <td>
              {{formatDate(editForm.jobDate)}}
            </td>
          </tr>
          <tr>
            <th>工作单位及职务</th>
            <td colspan="3">
              {{editForm.unitName}}
            </td>
            <th>任职时间</th>
            <td>
              {{formatDate(editForm.currentJobDate)}}
            </td>
          </tr>
          <tr>
            <th colspan="6">变动情况</th>
          </tr>
          <tr>
            <th colspan="2">项目</th>
            <th>变动前</th>
            <th>变动后</th>
            <th colspan="2">增资额</th>
          </tr>
          <tr>
            <th colspan="2">参照标准</th>
            <td style="text-align:center">
              {{editForm.standard1}}
            </td>
            <td style="text-align:center">
              {{editForm.standard2}}
            </td>
            <td colspan="2" style="text-align:center">
              ——
            </td>
          </tr>
          <tr>
            <th colspan="2">岗位类别</th>
            <td style="text-align:center">
              {{editForm.jobClass1}}
            </td>
            <td style="text-align:center">
              {{editForm.jobClass2}}
            </td>
            <td colspan="2" style="text-align:center">
              ——
            </td>
          </tr>
          <tr>
            <th colspan="1" rowspan="2">岗位工资</th>
            <th>岗位等级</th>
            <td style="text-align:center">
              {{editForm.jobLevel1}}
            </td>
            <td style="text-align:center">
              {{editForm.jobLevel2}}
            </td>
            <td colspan="2" style="text-align:center">
              ——
            </td>
          </tr>
          <tr>
            <th>工资标准</th>
            <td style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.jobSalary1}}</div>
            </td>
            <td style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.jobSalary2}}</div>
            </td>
            <td colspan="2" style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.jobSalary3}}</div>
            </td>
          </tr>
          <tr>
            <th colspan="1" rowspan="2">薪级工资</th>
            <th>薪级</th>
            <td style="text-align:center">
              {{editForm.salaryLevel1}}
            </td>
            <td style="text-align:center">
              {{editForm.salaryLevel2}}
              <div v-if="editForm.reason!==21&&editForm.reason!==22&&editForm.reason!==23">理论值：<span :style="'color:'+((editForm.salaryLevel3===editForm.salaryLevel2)?'green':'red')+';font-size:20px;font-weight:bolder'">{{editForm.salaryLevel3}}</span></div>
            </td>
            <td colspan="2" style="text-align:center">
              ——
            </td>
          </tr>
          <tr>
            <th>工资标准</th>
            <td style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.levelSalary1}}</div>
            </td>
            <td style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.levelSalary2}}</div>
            </td>
            <td colspan="2" style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.levelSalary3}}</div>
            </td>
          </tr>
          <tr>
            <th colspan="2">合计</th>
            <td style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.salary1}}</div>
            </td>
            <td style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.salary2}}</div>
            </td>
            <td colspan="2" style="text-align:center">
              <div style="font-size:20px;font-weight:bolder">{{editForm.salary3}}</div>
            </td>
          </tr>
          <tr>
            <th colspan="2">变动后薪级级别与理论值不符，请说明原因</th>
            <td colspan="4">
              {{editForm.description}}
            </td>
          </tr>
          <tr>
            <th colspan="2">执行时间</th>
            <td colspan="4">
              自 {{formatDate(editForm.salaryDate)}} 起执行
            </td>
          </tr>
          <tr>
            <th>备注</th>
            <td colspan="5">
              {{editForm.remarks}}
            </td>
          </tr>
          <tr>
            <th>附件</th>
            <td colspan="5">
              <div>
                <div v-for="(item,index) in editForm.files" :key="index">
                  <el-link
                    :href="$http.defaults.baseURL+$http.defaults.salaryAPI+'api/salaryGenFileInfo/download?id='+item.id"
                    icon="el-icon-paperclip"
                  >{{ item.fileName+(item.fileType?'.'+item.fileType:'') }}</el-link>
                </div>
              </div>
            </td>
          </tr>
          <tr v-if="editForm.state===1">
            <th>审批</th>
            <td colspan="5">
              <el-radio-group v-model="passed">
                <el-radio :label="2">通过</el-radio>
                <el-radio :label="3">退回</el-radio>
              </el-radio-group>
              <div v-if="passed===3">
                请输入退回原因<br />
                <el-input type="textarea" v-model="bz" style="width:100%"></el-input>
              </div>
            </td>
          </tr>
        </table>
        <div v-if="editForm.state===1" style="margin:0 10px">
          <el-button type="primary" @click.native="submitApproval" :loading="saveloading" >提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    timestamp: {
      handler (val) {
        this.editFormReset()
        this.getApprovalDetail(this.approvalId)
      },
      immediate: true
    }
  },
  props: {
    state: '', // state===2从已完成列表点击编辑
    Formal: false,
    showDept: true,
    personId: '',
    approvalId: '',
    readOnly: '',
    timestamp: '',
    passStep: ''
  },
  data () {
    return {
      sexList: [{label: '男', value: 1}, {label: '女', value: 2}],
      reasonList: [
        {
          label: '审批',
          options: [{
            value: 11,
            label: '新提任副局级干部'
          }, {
            value: 12,
            label: '现任局级干部变更工资序列'
          }, {
            value: 13,
            label: '现任局级干部从企业或原执行公务员工资序列单位调入部直属事业单位'
          }]
        }, {
          label: '备案',
          options: [{
            value: 21,
            label: '局级干部年度晋升工资薪级'
          }, {
            value: 22,
            label: '因享受劳模待遇高定工资薪级'
          }, {
            value: 23,
            label: '因受处分、被采取强制措施或受行政、刑事处罚需要低定工资'
          }, {
            value: 24,
            label: '因岗位等级晋升需要晋升基本工资'
          }]
        }
      ],
      bz: '',
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      showMore: false,
      passed: null,
      importPhotoFlag: false,
      imageUrl: '',
      editForm: {
        id: null,
        theYear: '',
        realname: '',
        realName: '',
        idCardNo: '',
        gender: '',
        birthday: '',
        education: '',
        jobDate: '',
        currentJobDate: '',
        unitName: '',
        reason: '',
        standard1: '',
        standard2: '',
        jobClass1: '',
        jobClass2: '',
        jobLevel1: '',
        jobLevel2: '',
        jobSalary1: '',
        jobSalary2: '',
        jobSalary3: '',
        salaryLevel1: '',
        salaryLevel2: '',
        salaryLevel3: '',
        levelSalary1: '',
        levelSalary2: '',
        levelSalary3: '',
        salary1: '',
        salary2: '',
        salary3: '',
        salaryDate: '',
        remarks: '',
        description: '',
        files: []
      },
      showlog: false,
      passed0: null,
      readed: false,
      files: [],
      fileList: [],
      pageLoading: false,
      zzmmoptions: [],
      xboptions: [],
      mzoptions: [],
      dwoptions: [],
      shfloptions: [],
      lyfloptions: [],
      pysyjylxoptions: [],
      saveloading: false,
      userRoles: '',
      unitname: '',
      opinionFlag: false,
      oldunit: 0
    }
  },
  methods: {
    download (id) {
      window.open(this.$http.defaults.baseURL + this.$http.defaults.salaryAPI + 'api/salaryGenFileInfo/download?id=' + id)
    },
    fReasonText (value) {
      let reasonText = ''
      let val = parseInt(value)
      if (val) {
        this.reasonList.forEach(item => {
          if (item.options.find(it => it.value === val)) {
            reasonText = item.label + ':' + item.options.find(it => it.value === val).label
          }
        })
      }
      return reasonText
    },
    getApprovalDetail (id) {
      let url = ''
      url = 'api/salaryBusApproval/getById'
      this.pageLoading = true
      this.$http
        .get(this.$http.defaults.salaryAPI + url + `?id=` + id)
        .then(response => {
          this.pageLoading = false
          if (response.data.success) {
            this.editForm = response.data.result
            this.editForm.reason = parseInt(this.editForm.reason)
            this.editForm.theYear = this.editForm.theYear.toString()
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.pageLoading = false
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    submitApproval () {
      if (!this.passed) {
        this.$message({
          message: '请选择审批结果',
          type: 'error'
        })
        this.saveloading = false
        return false
      }
      if (this.passed === 3 && this.bz === '') {
        this.$message({
          message: '选择退回请说明原因',
          type: 'error'
        })
        return false
      }
      this.saveloading = true
      let para = {
        id: this.editForm.id,
        state: this.passed,
        backReason: this.passed === 3 ? this.bz : '',
        fileIds: (this.editForm.files && this.editForm.files.length > 0) ? this.editForm.files.map(item => item.id) : []
      }
      this.$http
        .post(this.$http.defaults.salaryAPI + 'api/salaryBusApproval/save', para)
        .then(response => {
          this.saveloading = false
          if (response.data.success) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.editFormReset()
            this.$emit('dialogHide', true)
          } else {
            this.$message({
              message: '保存失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.saveloading = false
          console.log(error)
          this.$message({
            message: '网络保存失败:' + error,
            type: 'error'
          })
        })
    },
    formatDate (str) {
      if (str) {
        return str.slice(0, 4) + '.' + str.slice(4, 6)
      }
    },
    editFormReset () {
      this.passed = null
      this.bz = ''
      this.editForm = {
        id: null,
        theYear: '',
        realname: '',
        realName: '',
        idCardNo: '',
        gender: '',
        birthday: '',
        education: '',
        jobDate: '',
        currentJobDate: '',
        unitName: '',
        reason: '',
        standard1: '',
        standard2: '',
        jobClass1: '',
        jobClass2: '',
        jobLevel1: '',
        jobLevel2: '',
        jobSalary1: '',
        jobSalary2: '',
        jobSalary3: '',
        salaryLevel1: '',
        salaryLevel2: '',
        salaryLevel3: '',
        levelSalary1: '',
        levelSalary2: '',
        levelSalary3: '',
        salary1: '',
        salary2: '',
        salary3: '',
        salaryDate: '',
        remarks: '',
        description: '',
        files: []
      }
    }
  },
  mounted () {
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 150px;
    display: block;
  }
  #youngcadresedit h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0 0 20px;
  }
  #youngcadresedit .el-table{
    border: #95B8E7 solid 1px;
  }
  #youngcadresedit .mytable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #youngcadresedit .mytable th,
  #youngcadresedit .mytable td{
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align:top;
    line-height: 150%;
    height: 22px;
  }
  #youngcadresedit .mytable th{
    background:#C0DCF1;
    width:120px;
    vertical-align: middle;
  }
  #youngcadresedit .mytable .passed th{
    background:#F7E4BB;
  }
  #youngcadresedit .mytable .passed td{
    background:#FBF0DB;
  }
  .youngnopic{
    background: url(../assets/nopic.gif) no-repeat;
    width: 120px;
    height: 150px;
  }
</style>
<style scoped>
.details{
  font-weight:bolder;
  border-bottom:1px solid #95B8E7;
  padding:0 10px;
  min-height: 36px;
}
</style>
